<template>
  <div v-loading="loading">
    <el-tabs style="max-width: 794px; margin: 0 auto" v-model="activeName">
      <el-tab-pane
        v-for="(guard, index) in guardDatas"
        :key="index"
        :label="guard.gua_entity"
        :name="`address-${index}`"
      >
        <register-contract-view-address-page
          :contract="entrustContract"
          :guard="guard"
          :related-data="relatedData"
        ></register-contract-view-address-page>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import RegisterContractViewAddressPage from './RegisterContractViewAddressPage'

export default {
  components: {
    RegisterContractViewAddressPage,
  },
  props: {
    relatedData: {
      type: Object,
      default: () => ({}),
    },
    loading: Boolean,
  },
  data() {
    return {
      activeName: 'address-0',
    }
  },
  computed: {
    ...mapGetters(['entrustContract', 'guardDatas']),
  },
  watch: {
    relatedData: {
      handler: function () {
        this.activeName = 'address-0'
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.page-content {
  max-width: 794px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
}
.text-indent {
  text-indent: 2.4rem;
}
.text-decoration {
  text-decoration: underline;
}
.border-noprint {
  border: 1px solid $border-color;
}
</style>
